<template>
  <view>
    <view
        v-if="show"
        @click="close"
        class="back"></view>
    <u-popup
        mode="bottom"
        bgColor="rgba(0,0,0,0)"
        overlay-opacity="0"
        zIndex="999999"
        :show="show" @close="close" @open="open"
    >

      <view class="box">
        <view style="height: 20rpx"></view>
        <view class="title">
          学历信息
        </view>
        <view style="height: 20rpx"></view>
        <scroll-view
            style="max-height: calc(100vh - 500rpx)"
            scroll-y>
          <view class="in-box">
            <view>学历</view>
            <scroll-view style="width: 100%" scroll-x>
              <view class="btn-box">
                <view
                    v-for="item in $talent.get.getEduLevelList()"
                    @click.prevent="setEduLevel(item)"
                    class="btn"
                  :class="{
                    'btn-active': item.level === params.eduLevelNumber
                  }"
                >
                  {{item.name}}
                </view>
              </view>
            </scroll-view>
          </view>

          <view
              v-if="params.eduLevelNumber&&params.eduLevelNumber>1"
              class="in-box">
            <view>院校名次</view>
            <view>
              <input
                  type="number"
                  v-model="params.schoolName"
                  placeholder="请输入院校名次">
              </input>
            </view>
          </view>

          <view
              class="in-box"
              v-if="params.eduLevelNumber&&params.eduLevelNumber>1">
            <view style="height: 20rpx"></view>
            <view
                @click="$refs.birthdayPopup.open()"
                class="btn-to"
              v-if="!params.gmtEduStart"
            >
              {{ params.gmtEduStart ?"毕业时间："+ $kt.date.format(params.gmtEduStart,"yyyy年MM月dd日") : "选择毕业时间" }}
            </view>
            <view
                @click="$refs.birthdayPopup.open()"
                v-else>
              {{ params.gmtEduStart ?"毕业时间："+ $kt.date.format(params.gmtEduStart,"yyyy年MM月dd日") : "选择毕业时间" }}
            </view>
            <view style="height: 20rpx"></view>
            <time-popup
                @change="change2"
                ref="birthdayPopup"
            ></time-popup>
          </view>

          <!-- 是否国外院校 -->
          <view
              v-if="params.eduLevelNumber&&params.eduLevelNumber>=6"
              class="in-box" style="text-align: left">
            <view style="display: inline-block">是否国外院校：</view>
            <view style="display: inline-block">
              <view
                  @click="params.isForeignSchool = true;$forceUpdate()"
                  class="btn"
                :class="{'btn-active':params.isForeignSchool}"
              >
                是
              </view>
              <view
                  @click="params.isForeignSchool = false;$forceUpdate()"
                  class="btn"
                :class="{'btn-active':!params.isForeignSchool}"
              >
                否
              </view>
            </view>
          </view>


          <!-- 是否不满两年制 -->
          <view
              v-if="params.eduLevelNumber&&params.eduLevelNumber>=6"
              class="in-box" style="text-align: left">
            <view style="display: inline-block">是否不满两年制：</view>
            <view style="display: inline-block">
              <view
                  @click="params.isNotTwoYearsEdu = true;$forceUpdate()"
                  class="btn"
                :class="{'btn-active':params.isNotTwoYearsEdu}"
              >
                是
              </view>
              <view
                  @click="params.isNotTwoYearsEdu = false;$forceUpdate()"
                  class="btn"
                :class="{'btn-active':!params.isNotTwoYearsEdu}"
              >
                否
              </view>
            </view>
          </view>

          <!-- 学科门类 -->
          <view
              v-if="params.eduLevelNumber&&params.eduLevelNumber>=4"
              class="in-box">
            <view>学科门类</view>
            <view>
              <view
                  @click="lv0Code = item.code;$forceUpdate()"
                  v-for="item in $talent.get.getEduMajorList()"
                  v-if="item.lv===0"
                  class="btn"
                :class="{'btn-active':item.code===lv0Code}"
              >
                {{item.name}}
              </view>
            </view>
          </view>

          <!-- 学科专业 -->
          <view
              v-if="params.eduLevelNumber&&params.eduLevelNumber>=4&&lv0Code"
              class="in-box">
            <view>一级专业</view>
            <view>
              <view
                  @click="lv1Code = item.code;$forceUpdate()"
                  v-for="item in $talent.get.getEduMajorList()"
                  v-if="item.lv===1&&item.lv0Code===lv0Code"
                  class="btn"
                :class="{'btn-active':item.code===lv1Code}"
              >
                {{item.name}}
              </view>
            </view>
          </view>

          <!-- 二级专业 -->
          <view
              v-if="params.eduLevelNumber&&params.eduLevelNumber>=4&&lv1Code"
              class="in-box">
            <view>二级专业</view>
            <view>
              <view
                  @click="params.eduMajorCode = item.code;$forceUpdate()"
                  v-for="item in $talent.get.getEduMajorList()"
                  v-if="item.lv===2&&item.lv1Code===lv1Code"
                  class="btn"
                :class="{'btn-active':item.code===params.eduMajorCode}"
              >
                {{item.name}}
              </view>
            </view>
          </view>

          <!-- 学位 -->
          <view
              v-if="params.eduLevelNumber&&params.eduLevelNumber>=6"
              class="in-box">
            <view>学位</view>
            <view>
              <view
                  @click="addOrRemoveDegrees(item.code)"
                  v-for="item in $talent.get.getEduMajorList()"
                  v-if="item.lv===0"
                  class="btn"
                :class="{'btn-active':isHasDegree(item.code)}"
              >
                {{item.name}}
              </view>
            </view>
          </view>


        </scroll-view>
        <view style="height: 20rpx"></view>
        <view
            @click="change"
            class="to-btn">确定
        </view>

      </view>


    </u-popup>
  </view>
</template>

<script>
import $talent from "@/js/talent";
import TimePopup from "@/pages/updateInfo/components/time-popup.vue";

export default {
  components: {TimePopup},
  props: {
    userInfo: {
      type: Object,
      default: () => {
        return {
          gmtBirthday: 0,
          genderCode: "male"
        };
      }
    }
  },
  watch: {
    // 监听lv0Code变化
    lv0Code() {
      this.lv1Code = "";
      this.params.eduMajorCode = "";
    },
    // 监听lv1Code变化
    lv1Code() {
      this.params.eduMajorCode = "";
    }
  },

  data() {
    return {
      show: false,
      mode: "single",
      indexIndex: 0,
      lv0Code: "",
      lv1Code: "",
      params: {
        schoolName: "",
        // 毕业时间
        gmtEduStart: "",
        eduMajorCode: "",
        eduMajorDegrees: [],
        isForeignSchool: false,
        // 是否不满两年制
        isNotTwoYearsEdu: false,
      },
      $talent: $talent,
      isAdd: false
    };
  },
  mounted() {
  },
  methods: {
    addOrRemoveDegrees(code) {
      if(!this.params.eduMajorDegrees){
        this.params.eduMajorDegrees = [];
      }
      let isHas = this.isHasDegree(code);
      if (!isHas) {
        this.params.eduMajorDegrees.push({
          degreeMajorCode: code
        })
      } else {
        for (let i = 0; i < this.params.eduMajorDegrees.length; i++) {
          if (this.params.eduMajorDegrees[i].degreeMajorCode === code) {
            this.params.eduMajorDegrees.splice(i, 1);
            break;
          }
        }
      }
      this.$forceUpdate();
    },
    isHasDegree(code) {
      if(!this.params.eduMajorDegrees){
        this.params.eduMajorDegrees = [];
      }
      for (let item of this.params.eduMajorDegrees) {
        if (item.degreeMajorCode === code) {
          return true;
        }
      }
      return false;

    },
    setEduLevel(item) {
      uni.showToast({
        title: item.level,
        icon: "none"
      });
      this.params.eduLevelNumber = item.level;
      this.$forceUpdate();
    },
    open() {
      this.params = JSON.parse(JSON.stringify(this.userInfo));
      // 通过getAll的code去查询 用来显示出 经济学->财政学类->国际税收
      if (this.userInfo.eduMajorCode) {
        // 获取二级专业
        let eduMajorOfLv2 = this.$talent.get.getEduMajorByCode(this.userInfo.eduMajorCode);
        // 获取所有专业信息
        let eduMajor = {
          // 获取专业门类
          lv0: this.$talent.get.getEduMajorByCode(eduMajorOfLv2.lv0Code),
          // 获取一级专业
          lv1: this.$talent.get.getEduMajorByCode(eduMajorOfLv2.lv1Code),
          // 获取二级专业
          lv2: this.$talent.get.getEduMajorByCode(eduMajorOfLv2.lv2Code),
        }
        this.lv0Code = eduMajor.lv0.code;
        this.lv1Code = eduMajor.lv1.code;
        this.params.eduMajorCode = eduMajor.lv2.code;

      }

      if(!this.params.eduLevelNumber){
        this.params.eduLevelNumber = 0;
      }
      this.show = true;
      this.$emit("open");
    },
    openOfAdd() {
      this.isAdd = true;
      this.show = true;

      this.$emit("open");
      this.isAdd = true;
    },
    close() {
      this.show = false;
      this.$emit("close");
    },
    change() {
      setTimeout(() => {
        this.$emit("change", this.params);
      }, 100);
      this.close();
    },
    change2(time) {
      this.params.gmtEduStart = time;
      this.$forceUpdate();
    }
  }
}
</script>

<style lang="scss" scoped>
.back {
  position: fixed;
  z-index: 999999;
  background-color: rgba(0, 0, 0, 0.5);
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}

.box {
  position: relative;
  background-color: #FFFFFF;
  padding: 0 20rpx 20rpx 20rpx;
  box-shadow: 0 10rpx 10rpx rgba(118, 118, 118, 0.1);
  border-radius: 20rpx 20rpx 0 0;
  text-align: center;
}

.in-box {
  position: relative;
  padding: 20rpx;
  box-sizing: border-box;
  font-size: 33rpx;
  letter-spacing: 2rpx;
  text-align: left;

  .btn {
    display: inline-block;
    padding: 10rpx 20rpx;
    border: 1rpx solid #999999;
    border-radius: 20rpx;
    margin: 10rpx;
  }
}

//.in-box:active{
//  opacity: .5;
//}
.text {
  position: absolute;
  display: inline-block;
  right: 0;
  font-size: 22rpx;
}

.to-btn {
  padding: 20rpx;
  border-radius: 20rpx;
  margin: 10rpx;
  background-color: #17A095;
  color: #FFFFFF;
}

.to-btn:active {
  opacity: .5;
}

.btn-active {
  background-color: #17A095;
  border: 1rpx solid #17A095;
  color: #FFFFFF;
}

.btn-box{
  // 不换行
  white-space: nowrap;
}

.btn-to{
  padding: 10rpx 20rpx;
  border: 1rpx solid #999999;
  border-radius: 20rpx;
  margin: 10rpx;
  background-color: #FFFFFF;
  color: #999999;
  font-size: 33rpx;
  letter-spacing: 2rpx;
}
</style>
